<template>
    <view class="pub_page pub_page_bg pub_panic_buy">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <pub-tabbar :active="2"></pub-tabbar>
        <pub-dialog v-show="dialogShow" :dialogConfig="dialogConfig" @dialogBack="dialogBack"></pub-dialog>
        <z-paging ref="Zpaging" class="pub_page_scroll page_box" v-model="list" @query="getList"
            :refresher-enabled="false" :fixed="false" :hide-empty-view="true">
            <div class="page">
                <div class="top_div">
                    <div class="num">
                        <div class="txt txt_1">旺票：{{ userInfo.consumeTicket || 0 }}</div>
                        <div class="txt txt_2">幸运值：{{ userInfo.increment || 0 }}</div>
                        <div class="txt txt_4">兑换券：{{ userInfo.exchangeTicket || 0 }}</div>
                        <div class="txt txt_3">幸运券：{{ userInfo.vipCard || 0 }}</div>
                    </div>
                    <div class="jdt">
                        <div class="has_box">
                            <div class="has" :style="{width:`${zzBtnPro}%`}"></div>
                        </div>
                    </div>
                    <div class="djs">
                        <div class="cont" :class="[`cont_type_${zzBtnInfo.type}`,zzBtnBool?'cont_click':'']">
                            <div class="txt_1" v-if="zzBtnInfo.type==3">倒计时</div>
                            <div class="txt_2">{{ zzBtnInfo.txt }}</div>
                        </div>
                        <div class="cont_mask" @click="zzBtnClick" @touchstart="zzBtnTouchStart"
                            @touchend="zzBtnTouchEnd"></div>
                        <div class="cont_img"></div>
                        <div class="dm" v-if="zzBtnEexceed>0">
                            <div class="txt">加油！我的小可爱</div>
                            <div class="txt">哇！你已经超过了{{zzBtnEexceed}}%的玩家了</div>
                        </div>
                        <!-- <div class="gif_list">
                            <div class="img" v-for="(li,key) in zzBtnClickPosition" :key="key" :style="{left:`${li.x}px`,top:`${li.y}px`}">
                                <img v-if="li.show" src="@/static/aimg/img_56.gif" alt="">
                            </div>
                        </div> -->
                    </div>
                    <div class="choose" @click="pageDeal('isUseVip')"> <span class="icon-font-basic"
                            :class="isUseVip ? 'icon-b-select-6' : 'icon-b-select-4'"></span>
                        使用幸运券</div>
                </div>
                <div class="goods_div">
                    <div class="title">兑换券专区</div>
                    <div class="lis">
                        <div class="li" v-for="(li,key) in list" :key="key"
                            @click="$comFun.openWin('/pages/index/good_info', { orderType: 3,id:li.id })">
                            <pub-image class="img" :src="li.coverImg" :mode="'aspectFit'"></pub-image>
                            <div class="text">
                                <div class="name">{{ li.goodsName }}</div>
                                <div class="msg">兑换价：{{ li.sellPrice }} 兑换券</div>
                                <div class="btn">兑换</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </z-paging>

        <div class="pub_alert" v-if="incrementResult != -1">
            <div class="cont">
                <!-- 失败 -->
                <div class="txt_1" v-if="incrementResult==0"></div>
                <!-- 成功 -->
                <div class="txt_2" v-else>恭喜你获得{{incrementResult}}兑换券</div>
                <div class="close icon-font-basic icon-b-off" @click="incrementResult=-1"></div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '幸运增值',//标题栏内容
                header_color: 'rgba(0,0,0,0)'
            },

            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },
            dialogData: {},

            list: [],
            userInfo: '',

            incrementInfo: '',
            isUseVip: false,
            zzBtnPro: 0,//点击进度条
            zzBtnEexceed: 0,//点击超过的玩家
            zzBtnBool: false,
            zzBtnClickPosition: [],
            incrementResult: -1,//-1默认  0增值失败 >0增值成功

            innerAudioContext: ''
        };
    },
    computed: {
        zzBtnInfo() {
            if (this.incrementInfo && this.userInfo) {
                if (this.incrementInfo.isRest == 1) {
                    return {
                        type: 0,
                        txt: '休息中'
                    }
                } else if (this.userInfo?.isIncrement == 1) {
                    return {
                        type: 1,
                        txt: '已增值'
                    }
                } else {
                    if (this.isUseVip) {
                        if (this.incrementInfo.isVipIncrement == 0) {
                            return {
                                type: 3,
                                txt: this.incrementInfo.djsVipTxt,//倒计时
                            }
                        } else {
                            return {
                                type: 4,
                                txt: '增值中'
                            }
                        }
                    } else {
                        if (this.incrementInfo.isIncrement == 0) {
                            return {
                                type: 3,
                                txt: this.incrementInfo.djsTxt,//倒计时
                            }
                        } else {
                            return {
                                type: 2,
                                txt: '进行中'
                            }
                        }
                    }
                }
            } else {
                return {
                    type: 0,
                    txt: ''
                }
            }
        },
        allowClick() {
            // (isIncrement==1 || 使用幸运券) && 用户今天未增值过 && 今天未休息
            return (this.incrementInfo?.isIncrement == 1 || this.isUseVip) && this.userInfo?.isIncrement == 0 && this.incrementInfo?.isRest != 1
        }
    },
    onLoad() {
        this.musicInit()

        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    onShow() {
        this.zzBtnPro = 0;
        this.zzBtnEexceed = 0;
        this.getInfo();
        this.getIncrementTime();
    },
    methods: {
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.key == 1) {
                this.pageDeal(this.dialogType)
            }
        },
        async getInfo() {
            if (this.userInfo == '') {
                this.$comFun.openLoading();
            }
            const res = await this.$request.get('user/userInfo', {});
            if (this.userInfo == '') {
                this.$comFun.closeLoading();
            }
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async getIncrementTime() {
            const res = await this.$request.get('user/getIncrementTime', {});
            if (res.code == 200 && res.result) {
                res.result.timer = ''
                res.result.djsTxt = ''
                res.result.viptimer = ''
                res.result.djsVipTxt = ''
                if (this.incrementInfo.timer) {
                    clearInterval(this.incrementInfo.timer)
                    clearInterval(this.incrementInfo.viptimer)
                }
                this.incrementInfo = res.result;
                if (this.incrementInfo.isRest != 1) {
                    this.dealDjsTxt();
                }
            }
        },
        dealDjsTxt() {
            // isIncrement=0显示倒计时 =1可开启增值
            // isVipIncrement=0显示倒计时 =1可开启增值
            if (this.incrementInfo.isIncrement == 0) {
                let endTime = new Date(this.incrementInfo.startIncrementTime).getTime() / 1000;
                let startTime = Date.parse(new Date()) / 1000;
                let diff = endTime - startTime
                this.incrementInfo.djsTxt = this.$comFun.getTimeDiffTxt(diff)
                this.incrementInfo.timer = setInterval(() => {
                    startTime = Date.parse(new Date()) / 1000;
                    diff = endTime - startTime
                    this.incrementInfo.djsTxt = this.$comFun.getTimeDiffTxt(diff)
                }, 1000)
            }
            if (this.incrementInfo.isVipIncrement == 0) {
                let endTime = new Date(this.incrementInfo.startVipIncrementTime).getTime() / 1000;
                let startTime = Date.parse(new Date()) / 1000;
                let diff = endTime - startTime
                this.incrementInfo.djsVipTxt = this.$comFun.getTimeDiffTxt(diff)
                this.incrementInfo.viptimer = setInterval(() => {
                    startTime = Date.parse(new Date()) / 1000;
                    diff = endTime - startTime
                    this.incrementInfo.djsVipTxt = this.$comFun.getTimeDiffTxt(diff)
                }, 1000)
            }
        },
        zzBtnClick() {
            if (!this.allowClick) return
            if (this.userInfo?.consumeTicket < 100) {
                this.$comFun.toast('您的旺票低于100，无法开启幸运增值')
                return
            }
            if (this.zzBtnPro < 100) {
                let num = Number(this.zzBtnPro) + parseInt(this.$comFun.getRandom(5, 10))
                this.zzBtnPro = num > 100 ? 100 : num
                this.musicPlay()
                if (this.zzBtnPro == 100) {
                    this.pageDeal('sure_startIncrement')
                }
            }
            if (this.zzBtnPro > 50 && this.zzBtnEexceed == 0) {
                this.zzBtnEexceed = parseInt(this.$comFun.getRandom(10, 99))
                setTimeout(() => {
                    this.zzBtnEexceed = -1
                }, 2000)
            }

        },
        musicInit() {
            this.innerAudioContext = uni.createInnerAudioContext();
            this.innerAudioContext.src = '../../static/music/panic_buy.mp3';
            this.innerAudioContext.volume = 1;
        },
        musicPlay() {
            this.innerAudioContext.stop()
            this.innerAudioContext.play()
            // #ifdef APP-PLUS
            plus.device.vibrate(200);
            // #endif
        },
        zzBtnTouchStart(event) {
            if (!this.allowClick) return
            this.zzBtnBool = true
            // let touchPosition = event.touches[0]
            // this.zzBtnClickPosition.push({
            //     show: true,
            //     x: touchPosition.pageX,
            //     y: touchPosition.pageY,
            // })
        },
        zzBtnTouchEnd() {
            if (!this.allowClick) return
            this.zzBtnBool = false
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: pageSize,
                categoryId: 3,
            };
            const res = await this.$request.get('goods/getGoodsPage', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async pageDeal(type, info, key) {
            switch (type) {
                case 'isUseVip':
                    if (this.userInfo.vipCard > 0) {
                        this.isUseVip = !this.isUseVip
                    } else {
                        this.$comFun.toast('您还没有幸运券');
                    }
                    break;
                // case '':
                //     this.dialogType = '';
                //     this.dialogConfig = {
                //         title: '提示',//标题栏内容
                //         content: '是否确定转让权益？'
                //     }
                //     this.dialogShow = true;
                //     break;
                case 'sure_startIncrement':
                    this.$comFun.openLoading();
                    const res_1 = await this.$request.get('user/startIncrement', {
                        isUseVip: this.isUseVip ? 1 : 0
                    });
                    this.$comFun.closeLoading();
                    if (res_1.code == 200) {
                        this.incrementResult = res_1.result
                        this.zzBtnPro = 0;
                        this.isUseVip = false;
                        this.getInfo();
                    } else {
                        this.zzBtnPro = 0;
                        this.isUseVip = false;
                        this.$comFun.toast(res_1.message);
                    }
                    break;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/panic_buy.scss";
</style>
